<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Demo 2</title>
		<meta name="description" content="A slice reveal effect that shows animated slices between image transitions" />
		<meta name="keywords" content="reveal, slices, effect, animation, css, web development, web design" />
		<link rel="stylesheet" type="text/css" href="../static/css/base.css" th:href="@{/css/base.css}" />
		<link rel="stylesheet" type="text/css" href="../static/css/uncover.css" th:href="@{/css/uncover.css}" />
		<script>
		document.documentElement.className = "js";
		var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
		supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
		</script>
	</head>
	<body class="demo-2 loading">
		<main>
			<div class="content content--fixed">
				<header class="codrops-header">
					<h1 class="codrops-header__title">欢迎 <span shiro:principal property="userName"/> 使用至尊智能家居系统</h1>
					<nav class="demos">
						<a class="demo" href="/system/main"><span>Demo 1</span></a>
						<a class="demo demo--current" href="/system/index2"><span>Demo 2</span></a>
						<a class="demo" href="/system/index3"><span>Demo 3</span></a>
					</nav>
				</header>
				<a class="github" href="https://github.com/codrops/SliceRevealer" title="Find this project on GitHub">
					<svg class="icon icon--github">
						<use xlink:href="#icon-github"></use>
					</svg>
				</a>
				<nav class="pagination">
					<span class="pagination__item">#1</span>
					<span class="pagination__item">#2</span>
					<span class="pagination__item">#3</span>
					<span class="pagination__item">#4</span>
					<span class="pagination__item">#5</span>
				</nav>
			</div>
			<div class="content">
				<div class="slides">
					<div class="slide slide--current">
						<div class="slide__img slide__img-size1" th:style="'background-image: url('+${'/img/1.jpg'}+');'"></div>
					</div>
					<div class="slide">
						<div class="slide__img slide__img-size2" th:style="'background-image: url('+${'/img/2.jpg'}+');'"></div>
					</div>
					<div class="slide">
						<div class="slide__img slide__img-size1" th:style="'background-image: url('+${'/img/3.jpg'}+');'"></div>
					</div>
					<div class="slide">
						<div class="slide__img slide__img-size3" th:style="'background-image: url('+${'/img/4.jpg'}+');'"></div>
					</div>
					<div class="slide">
						<div class="slide__img slide__img-size2" th:style="'background-image: url('+${'/img/5.jpg'}+');'"></div>
					</div>
				</div>
			</div>

			<!-- replace "slide__img" with the following structure:

			<div class="revealer slide__img">
				<div class="revealer__img" style="background-image: url(img/1.jpg)"></div>
				<div class="revealer__slices revealer__slices--vertical">
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
					<div class="revealer__slice"></div>
				</div>
			</div> 

		    -->

			<!-- 

				- apply revealer layout class to "revealer__slices":
						- revealer__slices--vertical 
						(translate slices either up or down e.g. translate3d(0,-100%,0) and then animate to 0)

						- revealer__slices--vertical-double -> also set e.g. "grid-template-columns: repeat(5,20%)" ; first value slices/2, second value is 100%/slices/2 
						(translate first half of items up and second half down)

						- revealer__slices--horizontal (translate to sides)
						
						- revealer__slices--horizontal-double (first half left, second half right)
					
				- add revealer__slice divs; note that the "-double" layouts spread them over the sides, i.e. 8 divs results in 4 on each side 

				- apply background color to "revealer__slice"

			-->
		</main>
		<script th:src="@{/js/imagesloaded.pkgd.min.js}"></script>
		<script th:src="@{/js/anime.min.js}"></script>
		<script th:src="@{/js/uncover.js}"></script>
		<script th:src="@{/js/demo2.js}"></script>
	</body>
</html>